<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>02_外间距测试</title>
            <style>
                body {
                    /* 去掉body自带的8px外间距*/
                    margin:0;
                }
                /* 去掉所有元素自带的内外间距*/
                * {
                    margin: 0;
                    padding: 0;
                }
                .fu {
                    background-color: rgba(255,255,0,.3);
                    /* 父子贴边：首个子元素的上外间距与最后一个元素的下外间距超出父元素的范围
                        解决 添加代码overflow:hidden 给父元素设置BFC结界保护
                     */
                    overflow:hidden;
                }
                .fu>div {
                    width:100px;/* 设置元素宽度 */
                    height:100px;/* 设置元素高度 */
                    background-color: rgba(0,0,255,.6);/* 设置元素背景色，不透明度0.6 */
                    border:2px solid #00f;/* 设置元素边框 2px的蓝色单实线边框 */
                    color:#fff;/* 设置文字颜色 */
                    font-size:25px;/* 设置文字字号 */
                    font-weight:bold;/* 设置字重：加粗 */
                }
                .zi1 {
                    margin-top: 50px;
                    margin-bottom: 30px;
                }
                /* zi1的bottom zi2的top相邻外间距同时有值 取大值50px显示 不是叠加30px+50px显示 */
                .zi2 {
                    margin-top: 50px;
                }
                .zi4 {
                    margin-bottom: 50px;
                }
                .zi3 {
                    margin:10px;/* 只写1个 从上开始顺时针四个方向都是10 */
                    margin:10px 20px;/* 写2个 上下10 右左20 */
                    margin:10px 20px 30px;/* 写3个 从上开始顺时针依次赋值 没赋值的找对向的值 上10 右20 下30 左20*/
                    margin:10px 20px 30px 40px;/* 写4个 从上开始顺时针依次赋值 上10 右20 下30 左40 */
                    /* 实现【块级元素】自身的水平居中 auto会自动将元素的左右外间距计算成相等的值*/
                    margin:0 auto; /*上下0 左右auto居中*/
                }
                .s2 {
                    /*行内元素垂直方向上的外间距不生效*/
                    margin:30px;
                }
            </style>
    </head>
    <body>
        <span>span1</span><span class="s2">span2</span><span>span3</span>
        <hr>
        <!-- 输入 .fu>.zi*4(表示class为fu的div下有class为zi的div4个) 后按Tab可快速生成 -->
        <div class="fu">
            <div class="zi1">子div1</div>
            <div class="zi2">子div2</div>
            <div class="zi3">子div3</div>
            <div class="zi4">子div4</div>
        </div>

    </body>
</html>